<?
/**
 * This file is part of XNAT light.
 *
 * XNAT light is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * XNAT light is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with XNAT light.  If not, see <http://www.gnu.org/licenses/>.
 */
?>
<html>
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css">
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script>
        require(["dojo/parser", "dojox/image/LightboxNano"], function(parser) {
                parser.parse();
        });

        var start = <?= $this->start ?>;

        function navButton(btn)
        {
            if(btn.id == 'back')
                start -= start - 10;
            else if(btn.id == 'forward')
                start += 10;
            
            window.location.href = "?start=" + start;
            return false;
        }
    </script>
  </head>
    <body class="tundra" style="margin-top:0px;">
        <div style="border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; position: fixed; width: 90%; height: 50px; background-color: black; z-index: 1"> 
        <table style="width: 100%; padding: 10px; font-weight: bold; color: white;">
            <tr>
                <td><a id="back" style="color: white; text-decoration: none; font-size: 18px" href="" onClick="return navButton(this)"><< Back</a></td>
                <td style="text-align: right"><a id="forward" style="color: white; text-decoration: none; font-size: 18px" href="", onClick="return navButton(this)">Forward >></a></td>
            </tr>
        </table></div>
        <br /><br /><br />
        <table style="border-collapse: collapse">
        <?
            // for each MR Session
            foreach($this->result as $label=>$data)
            {
                echo "<tr><td><table style='border-collapse: collapse'>";
                // metrics rows
                $key_row = '<tr>';
                $val_row = '<tr>';
                $row_style = "border: 1px solid; padding: 4px;";
                foreach($data['metrics'] as $key=>$value)
                {
                    $key_row .= "<td style='font-weight: bold; background-color: #DEDEDE; $row_style'>$key</td>";
                    $val_row .= "<td style='$row_style'>$value</td>";
                }
                $key_row .= "</tr>";
                $val_row .= "</tr>";
                echo $key_row; 
                echo $val_row;
                echo "</table></td></tr>";

                echo "<tr></td><table>";
                //image row
                $img_size = "150px";
                $img_row = '<tr>';
                foreach($data['images'] as $name=>$uri)
                    $img_row .= "<td style='padding: 4px'>
                                   <a data-dojo-type='dojox.image.LightboxNano' href='$uri'>
                                     <img style='max-height: $img_size; border: 1px solid black; padding: 2px' src='$uri' />
                                   </a>
                                 </td>";
                $img_row .= "</tr>";
                echo $img_row;
                echo "</table></td></tr><br />";
            }
        ?>
        </table>
     </body>
</html>
